<template>
  <!-- 营业部经理 -->
  <div id="app">
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in swipeImages" :key="image">
        <img :src="image" @click="showPreview" />
      </van-swipe-item>
    </van-swipe> -->
    <Transition name="bounce">
      <div class="showAdvertising" v-if="advertisingStore.showAdvertising">
        <img :src="advertising" alt="" />
      </div>
    </Transition>
    <div v-if="!advertisingStore.showAdvertising">
      <div class="header">
        <van-icon name="user-circle-o"></van-icon>
        <div>{{ name }}经理，你好！</div>
      </div>
      <div class="title">“五个一”功成（日）</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('SalesManager_Daily')">
          <van-icon name="records" size="36" color="#C42718" />
          <p>一日三走访</p>
        </van-grid-item>
      </van-grid>
      <div class="title">“五个一”功成（周）</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('SalesManager_WeekSalon')">
          <van-icon name="gift-card-o" size="36" color="#f8c622" />
          <p>一周一微沙</p>
        </van-grid-item>
        <van-grid-item @click="toNext('SalesManager_WeekLargeOrder')">
          <van-icon name="refund-o" size="36" color="#C42718" />
          <p>一周一大单</p>
        </van-grid-item>
      </van-grid>

      <div class="title">“五个一”功成（月）</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('SalesManager_MonthlyPlan')">
          <van-icon name="todo-list-o" size="36" color="#00a79d" />
          <p>月度计划</p>
        </van-grid-item>
        <van-grid-item @click="toNext('SalesManager_MonthlyReport')">
          <van-icon name="shop-o" size="36" color="#7766D1" />
          <p>支行月汇报</p>
        </van-grid-item>
      </van-grid>

      <div class="title">“五个一”功成（季）</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('SalesManager_SeasonalStart')">
          <van-icon name="logistics" size="36" color="#C42718" />
          <p>一季一启动</p>
        </van-grid-item>
      </van-grid>

      <div class="title">我的记录</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('SalesManager_DailyList')">
          <van-icon name="credit-pay" size="36" color="#C42718" />
          <p>走访记录</p>
        </van-grid-item>
        <van-grid-item @click="toNext('SalesManager_WeekSalonList')">
          <van-icon name="ecard-pay" size="36" color="#3762FB" />
          <p>微沙龙记录</p>
        </van-grid-item>

        <van-grid-item @click="toNext('SalesManager_WeekLargeOrderList')">
          <van-icon name="points" size="36" color="#EC8316" />
          <p>大单记录</p>
        </van-grid-item>

        <van-grid-item @click="toNext('SalesManager_MonthlyPlanList')">
          <van-icon name="todo-list-o" size="36" color="#00a79d" />
          <p>月度计划记录</p>
        </van-grid-item>

        <van-grid-item @click="toNext('SalesManager_MonthlyReportList')">
          <van-icon name="shop-o" size="36" color="#7766D1" />
          <p>支行月汇报记录</p>
        </van-grid-item>

        <van-grid-item @click="toNext('SalesManager_SeasonalStartList')">
          <van-icon name="shop-o" size="36" color="#7766D1" />
          <p>一季一启动记录</p>
        </van-grid-item>
      </van-grid>
      <div class="title">数据统计报表</div>
      <van-grid :column-num="3" clickable>
        <!-- <van-grid-item @click="toNext('SalesManager_managerSatement')">
        <van-icon name="new" size="36" color="#f8c622" />
        <p>客户经理报表</p>
      </van-grid-item> -->
        <van-grid-item @click="toNext('deptManagerReport')">
          <van-icon name="completed" size="36" color="#f8c622" />
          <p>我的填写情况</p>
        </van-grid-item>
        <van-grid-item @click="toNext('saleManagerReport2')">
          <van-icon name="bar-chart-o" size="36" color="#C42718" />
          <p>客户经理报表</p>
        </van-grid-item>
      </van-grid>
      <div class="title">上周榜单</div>
      <van-grid :column-num="3" clickable>
        <van-grid-item @click="toNext('/saleManagerTutoringTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一日三辅导</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>客户经理一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/saleManagerTrainingTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>客户经理一周一外训</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerTutoringTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>营业部经理一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerSalonTop')">
          <van-icon name="award" size="36" color="#C42718" />
          <p>营业部经理一周一微沙</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/deptManagerLargeorderTop')">
          <van-icon name="award" size="36" color="#7766D1" />
          <p>营业部经理一周一大单</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsTutoringTop')">
          <van-icon name="award" size="36" color="#3762FB" />
          <p>总监一日三走访</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsPreserveTop')">
          <van-icon name="award" size="36" color="#f8c622" />
          <p>总监一周一维护</p>
        </van-grid-item>
        <van-grid-item @click="toNext('/directorsMonthprojectTop')">
          <van-icon name="award" size="36" color="#00a79d" />
          <p>总监一月一项目</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCountDown } from '@vant/use'

const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import { getcarouselMapApi } from '@/request/api.js'
import advertising from '@imgs/yybjl.jpg'
const swipeImages = ref([])
import { useAdvertisingStore } from '@/stores/stores'
const advertisingStore = useAdvertisingStore()
onMounted(() => {
  if (advertisingStore.showAdvertising) {
    countDown.start()
  }
  agentcode.value = route.query.agentCode
  name.value = route.query.name
  // getCarouselMap()
  // console.log(agentcode.value)
  // agentcode.value = "wujieqing"
})

// 倒计时方法
const codeText = ref('')
const countDown = useCountDown({
  time: 2 * 1000,
  onFinish: () => {
    countDown.reset()
    advertisingStore.showAdvertising = false
  },
  onChange: (value) => {
    codeText.value = value.seconds
  }
})

function getCarouselMap() {
  getcarouselMapApi().then((res) => {
    console.log(res)
    swipeImages.value = res.data
  })
}
function toNext(href) {
  router.push({
    path: href,
    query: {
      agentcode: agentcode.value
    }
  })
}
const agentcode = ref('')
const name = ref('')

// function showPreview() {
//   showImagePreview({
//     images: swipeImages.value,
//     closeable: true
//   })
// }
</script>
<style lang="less" scoped>
@import '@css/agentIndex.less';
</style>
